import React, { Component, lazy } from 'react'

import './Main.css'

import {
  Route,
  NavLink
} from "react-router-dom"

const Home = lazy(() => import('./Home'))
const Cart = lazy(() => import('./Cart'))
const Ucenter = lazy(() => import('./Ucenter'))

export default class Main extends Component {
  render() {
    return (
      <div>
        <h2>主页面(布局)组件</h2>
        <Route path="/main/home" component={Home} />
        <Route path="/main/cart" component={Cart} />
        <Route path="/main/ucenter" component={Ucenter} />

        <div className="nav-link">
          <ul>
            <li><NavLink to="/main/home">首页</NavLink></li>
            <li><NavLink to="/main/cart">购物车</NavLink></li>
            <li><NavLink to="/main/ucenter">用户中心</NavLink></li>
          </ul>
        </div>
      </div>
    )
  }
}
